<template>
  <div id="add_bank" v-show="updateBank">
    <div class="add_bank_text">卡号:
      <input class="add_bank_input" v-model="cardNumber"  @blur="checkoutCardNumber()"/>
    </div>
    <div class="add_bank_text">所属银行:
      <el-select v-model="depositBank" class="add_bank_text1" placeholder="请选择" size="medium">
        <el-option
          class="add_bank_text2"
          v-for="item in options"
          :key="item.value"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="add_bank_text">姓名：
      <input class="add_bank_input" v-model="name" />
    </div>
    <div class="add_bank_text">手机：
      <input class="add_bank_input" v-model="phoneNumber"  @blur="checkoutTel()"/>
    </div>
    <div class="add_bank_button"  @click="addBank()">
      添加
    </div>
    <errorTip :errorTipVisible.sync="errorTipVisible" :message="errorMessage"/>
  </div>
</template>
<script>
import '../../css/layout.css'
import User from '_common/services/user'
import errorTip from '_components/errorTip/errorTip'
import { Select, Option } from 'element-ui';
import wxLogin from '_common/wxLogin.js'
//样式文件，需单独引入
import 'element-ui/lib/theme-chalk/index.css';
export default {
  	name: 'add_bank',
  	data() {
  		return {
        cardNumber: '',
        depositBank: '',
        name: '',
        phoneNumber: '',
        options: [
          {value: '中国工商银行'},
          {value: '中国农业银行'},
          {value: '中国银行'},
          {value: '中国建设银行'},
          {value: '交通银行'},
          {value: '广发银行'},
          {value: '中信银行'},
          {value: '招商银行'},
          {value: '民生银行'},
          {value: '中国邮政储蓄银行'},
          {value: '光大银行'},
          {value: '平安银行'},
          {value: '浦发银行'},
          {value: '兴业银行'},
          {value: '华夏银行'},
        ],
        errorTipVisible: false,
			  errorMessage: '' // 错误信息
  		}
    },
    props: {
      updateBank: {
        type: Boolean,
        default: false,
      }
    },
  	computed: {
    },
    async beforeMount() {
      await wxLogin()
    },
  	methods: {
      checkoutCardNumber() {
			if (this.cardNumber === '') {
				this.errorMessage = '银行卡号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.checkBankCard(this.cardNumber)) {
        this.cardNumber = '';
				this.errorMessage = '银行卡号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		checkoutTel() {
			if (this.phoneNumber === '') {
				this.errorMessage = '手机号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.tel(this.phoneNumber)) {
				this.phoneNumber = '';
				this.errorMessage = '手机号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
      addBank () {
        if (!this.checkoutTel() || !this.checkoutCardNumber()) {
          return false;
        }
        
        User.addBankCard({
          depositBank: this.depositBank,
          cardNumber: this.cardNumber,
          phoneNumber: this.phoneNumber,
        }).then(res => {
          if (res && res.code === 0) {
            	this.$alertTip({
							message: res.msg,
							time: 2000
            });
            // this.$emit('update:updateBank', false);
            window.location.reload();
            scrollTo(0,0);
          }
        }, reject => {

        })
      },
    },
    mounted(){
    },
    components: {
      [Select.name]: Select,
      [Option.name] : Option,
      errorTip,
    }
}  
</script>

<style lang="less" scoped>
html {
  height: 100%;
  body {
  height: 100%;
  background-color: #f8f8f8;
  }
}
#add_bank {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  padding-left: 32px; 
  background-color: white;
  position: fixed;
  left: 0;
  top:0;
  z-index: 10;
  .add_bank_text1 {
    margin-left: 60px ;
    height: 80px;
    display: flex;
    align-items: center;
    font-size: 32px;
    .add_bank_text2 {
       height: 80px;
    }
  }
  .add_bank_text {
    display: flex;
    align-items: center;
    font-size: 32px;
    height: 88px;
    border-bottom: 1px solid #eaeaea;
    .add_bank_input {
      padding-left: 10px;
      outline:none;  
      border:0px;
      width: 70%;
      font-size: 32px;
      .el-input {
        margin-left: 40px !important;
        height: 60px !important;
      }
    }
  }
  .add_bank_button {
    margin-top: 56px;
    margin-right: 32px;
    box-sizing: border-box;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 36px;
    color: white;
    background-color: #f3a13a;
  }
}
</style>